<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>基于Ajax灾区物资运输管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">审核求助</div>
                <div class="layui-card-body ">
                    <div class="layui-card-body layui-table-body layui-table-main">
                        <table class="layui-table layui-form" id="table-demo" lay-filter="table-demo"></table>
                    </div>
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="select">审核操作</a>
                    </script>
                    <script type="text/html" id="statusTpl">
                        {{# if(d.status == 1){ }}
                        <span style="color: #1AA094;">已通过</span>
                        {{# }else if(d.status == 0) {  }}
                        <span>待审核</span>
                        {{# }else if(d.status == 3) {  }}
                        <span style="color: #F3D213;">待帮助</span>
                        {{# }else{  }}
                        <span style="color: #ff0000;">不通过</span>
                        {{# } }}
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<div style="display: none; padding: 20px;" id="checkLayer">
    <form class="layui-form">
        <input type="hidden" id="materialsId" name="id">
        <div class="layui-form-item">
            <label for="status" class="layui-form-label">
                <span class="x-red">*</span>审核状态：</label>
            <div class="layui-input-block">
                <select name="status" id="status" lay-verify="required">
                    <option value="1">通过</option>
                    <option value="2">不通过</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label for="checkIdea" class="layui-form-label">
                <span class="x-red">*</span>审核意见：</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入审核意见" class="layui-textarea" id="checkIdea" name="checkIdea" lay-verify="required"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_username" class="layui-form-label"></label>
            <button class="layui-btn" lay-filter="add" lay-submit="">提交</button>
        </div>
    </form>
</div>
</body>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/xcity.js"></script>
<script>
    layui.use(['laydate','form', 'table'], function(){
        var laydate = layui.laydate;
        var  form = layui.form;
        var table = layui.table;
        var account = JSON.parse(window.sessionStorage.getItem("account"));

        table.render({
            elem: "#table-demo",
            url: './materials/queryMaterialsCheckApply',
            id: 'table-search',
            page: false,
            cols:[
                [
                    {field: 'id', title: 'ID', width:100, fixed: 'left'}
                    ,{field: 'peopleName', title: '联系人', width:100}
                    ,{field: 'demandType', title: '需求物资', width:100}
                    ,{field: 'disasterType', title: '受灾情况', width:100}
                    ,{field: 'peopleAddress', title: '所在城市', width:180}
                    ,{field: 'applicationTime', title: '申请时间', width:100}
                    ,{field: 'status', title: '申请状态', width:100, templet: '#statusTpl'}
                    ,{title: '操作', toolbar: "#barDemo", width: 200, fixed: 'right'}
                ]
            ]
        });

        // 表格操作项(选择)
        // @author-子墨
        var indexCheckLayer;
        table.on("tool(table-demo)", function(obj){
            var data = obj.data;
            if(obj.event === 'select') {
                $("#materialsId").val(data.id); // 物资ID
                indexCheckLayer = layer.open({
                    title: '物资申请审核',
                    type: 1,
                    skin: 'layui-layer-rim',
                    area: ['550px', '300px'],
                    content: $("#checkLayer"),
                    maxmin: true,
                    minStack: false, //最小化不堆叠在左下角
                    id: 'page1', //定义 ID，防止重复弹出
                });
            }
        });

        form.on('submit(add)', function(data) {
            $.ajax({
                url: './materials/editMaterialsCheckApply',
                type: 'post',
                data: data.field,
                dataType: 'json',
                success: function(res) {
                    layer.msg(res.msg, {time: 2000}, function () {
                        location.reload();
                    })
                },
                error: function() {
                    layer.msg('服务器异常', {time: 2000});
                }
            })
            layer.close(indexCheckLayer);
            return false;
        })

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });

    });

</script>
</html>
